﻿<!DOCTYPE html>
<html>
<head>
	<title>导航</title>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="font/layui.css">
	<style type="text/css">
		*{margin: 0;padding: 0;list-style: none;font-size: 14px}
		#container{
	width: 300px;
	height:auto;
	border: 1px solid #e4e4e4;
	margin-right: auto;
	margin-left: auto;;
	margin-top: 50px;
			padding: 10px;
		}
		.second-wrapper {
			margin:10px 0 10px 20px;
			display: none;
		}
		.three-wrapper {
			margin:10px 0 10px 20px;
			display: none;
		}
		.active {
			background: orange;
		}
		.nav:hover{
	color: #B8624A
}
	</style>
</head>
<body>
	<div id="container">
		<div class="frist-title">
			<i class="layui-icon layui-icon-triangle-r myicon" style="font-size: 15px; color: #000;"></i>
			<i class="layui-icon layui-icon-triangle-d myicon" style="font-size: 15px; color: #000;display: none;"></i>
			<span class="text">总计（28）</span>
		</div>
		<ul class="second-wrapper">
		</ul>
	</div>


</body>
</html>
<script src="jquery.min.js"></script>
<script type="text/javascript" src="layui.js"></script>
<script type="text/javascript">
	var secondLists = ["周工作预计划","月工作预计划","年工作预计划"];
	var threeLists = ["数据信息1","数据信息2","数据信息3"];
	var fristTitle = $(".frist-title")


	fristTitle.on("click",function(){
		var secondListStr = "";
		for (var i = 0; i < secondLists.length; i++) {
			secondListStr +='<li>'+
				'<div class="second-title">'+
					'<i class="layui-icon layui-icon-triangle-r myicon" style="font-size: 15px; color: #000;"></i>'+
					'<i class="layui-icon layui-icon-triangle-d myicon" style="font-size: 15px; color: #000;display: none;"></i>'+
					'<span class="text">'+secondLists[i]+'</span>'+
				'</div>'+
				'<dl class="three-wrapper">'+
				'</dl>'+
			'</li>';
		}
		$(".second-wrapper").html(secondListStr);
		$(this).find(".myicon").toggle();
		$(this).next().toggle();
		var text = $(this).find(".text").text();
		console.log(text)
	})	

	$("#container").on("click",".second-title",function(){
		var threeListStr = "";
		for (var i = 0; i < threeLists.length; i++) {
			threeListStr +=  '<dd class="nav">'+threeLists[i]+'</dd>';
		}
		$(this).next().html(threeListStr);
		$(this).find(".myicon").toggle();
		$(this).next(".three-wrapper").toggle();
		console.log($(this).find(".text").text());
	})

	$("#container").on("click",".nav",function(){
		var allNav = $("#container").find(".nav").removeClass("active");
		$(this).addClass("active");
		var text = $(this).text();
		var parentTitle = $(this).parent().prev().find(".text").text();
		console.log(text,parentTitle)
	})



</script>


